import QtQuick 2.6
import QtQuick.Layouts 1.1

import "../../../../Base/UiBase"
import "../../../../Base/Config"
import Utils 1.0

import Cpp.Request 1.0 as Request

Rectangle {
    id: root

    property alias source: image.source

    anchors.fill: parent
    color: Color.background

    Column {
        width: parent.width
        spacing: 0

        // column[0]
        Rectangle {
            width: parent.width
            height: 96 * Size.ratio
            color: Color.foreground
            MouseArea {
                width: parent.height
                height: parent.height

                onClicked: root.visible = false
                Rectangle {
                    anchors.fill: parent
                    color: Color.pressed
                    visible: parent.pressed
                }
                SvgzImage {
                    anchors.centerIn: parent
                    sourceSize.width: 80 * Size.ratio
                    sourceSize.height: 96 * Size.ratio
                    source: "../../../../../resources/comment/fanhiu01.svg"
                }
            }

            Text {
                text: "你的作品"
                anchors.centerIn: parent
                font.pixelSize: Size.largeFont
            }

            MouseArea {
                width: parent.height
                height: parent.height
                anchors.right: parent.right

                enabled: uploader.status === Request.FileUploader.Ok

                onClicked: {
                    submitter.newImage(typeLabel.text, 1, uploader.remotePath, input.text)
                }
                Rectangle {
                    anchors.fill: parent
                    color: Color.pressed
                    visible: parent.pressed
                }
                Text {
                    text: "发布"
                    anchors.centerIn: parent
                    font.pixelSize: Size.titleFont
                }
            }

            BottomDivider {
            }
        } // column[0]

        // column[1]
        Rectangle {
            width: parent.width
            height: 365 * Size.ratio
            color: Color.foreground
            RowLayout {
                anchors.fill: parent
                spacing: 0
                MouseArea {
                    Layout.preferredWidth: 230 * Size.ratio
                    Layout.preferredHeight: parent.height

                    onClicked:{
                        imagePicker.open()
                    }
                    ImagePicker {
                        id:imagePicker
                        onAccepted:image.source = fileUrl
                    }
                    Rectangle {
                        anchors.fill: parent
                        border.width: 1
                        border.color: Color.virtualBorder
                    }
                    SvgzImage {
                        id:image
                        anchors.centerIn: parent
                        sourceSize.width: 180 * Size.ratio
                        sourceSize.height: 320 * Size.ratio
                        width: sourceSize.width
                        height: sourceSize.height
                        onSourceChanged: {
                            if(source)
                            {
                                uploader.upload(source)
                            }
                        }
                        ProgressMask {
                            anchors.fill: parent
                            visible: uploader.status === Request.FileUploader.Communicating
                            progress: uploader.progress
                        }

                        Text {
                            anchors.centerIn: parent
                            text: "点击添加辅助图片"
                            color: Color.virtualInput
                            font.pixelSize: Size.smallFont
                            visible: parent.status === Image.Null
                        }
                    }
                }
                Text {
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    padding: 15 * Size.ratio
                    color: Color.virtualInput
                    font.pixelSize: Size.smallFont
                    text: input.length === 0 ? "描述一下你的作品吧" : ""
                    TextInput {
                        id: input
                        anchors.fill: parent
                        padding: parent.padding
                        font.pixelSize: Size.normalFont
                        color: Color.input
                        wrapMode: Text.WrapAnywhere
                    }
                    Text {
                        property int maxLength: 140
                        anchors.right: parent.right
                        anchors.bottom: parent.bottom
                        padding: parent.padding
                        color: input.length
                               < maxLength ? Color.virtualInput : Color.critical
                        text: String(maxLength - input.length) + "/" + maxLength
                        font.pixelSize: Size.smallFont
                    }
                }
            }
        } // column[1]

        // column margin
        Item {
            width: parent.width
            height: Size.elementInterval
        } // column margin

        // column[2]
        Rectangle {
            width: parent.width
            height: 96 * Size.ratio
            color: Color.foreground
            MouseArea {
                anchors.fill: parent
                Rectangle {
                    anchors.fill: parent
                    color: Color.pressed
                    visible: parent.pressed
                }
                RowLayout {
                    spacing: 0
                    anchors.fill: parent
                    Item {
                        Layout.fillHeight: true
                        Layout.preferredWidth: height * 0.618
                    }
                    Text {
                        anchors.verticalCenter: parent.verticalCenter
                        text: "作品类别"
                        font.pixelSize: Size.titleFont
                    }

                    Item {
                        Layout.fillHeight: true
                        Layout.fillWidth: true
                    }

                    Text {
                        id:typeLabel
                        Layout.alignment: Qt.AlignRight
                        anchors.verticalCenter: parent.verticalCenter
                        text: "速写风景"
                        font.pixelSize: Size.titleFont
                    }
                    Item {
                        Layout.alignment: Qt.AlignRight
                        Layout.fillHeight: true
                        Layout.preferredWidth: height * 0.618
                    }
                }
            }
        } // column[2]

        // column margin
        Item {
            width: parent.width
            height: Size.elementInterval
        } // column margin

        // column[3]
        Rectangle {
            width: parent.width
            height: 96 * Size.ratio
            color: Color.foreground
            MouseArea {
                anchors.fill: parent
                Rectangle {
                    anchors.fill: parent
                    color: Color.pressed
                    visible: parent.pressed
                }
                RowLayout {
                    spacing: 0
                    anchors.fill: parent
                    Item {
                        Layout.fillHeight: true
                        Layout.preferredWidth: height * 0.618
                    }
                    Text {
                        anchors.verticalCenter: parent.verticalCenter
                        text: "同时发给专评老师"
                        font.pixelSize: Size.titleFont
                    }

                    Item {
                        Layout.fillHeight: true
                        Layout.fillWidth: true
                    }

                    Text {
                        Layout.alignment: Qt.AlignRight
                        anchors.verticalCenter: parent.verticalCenter
                        text: "我的收藏 >"
                        font.pixelSize: Size.titleFont
                    }
                    Item {
                        Layout.alignment: Qt.AlignRight
                        Layout.fillHeight: true
                        Layout.preferredWidth: height * 0.618
                    }
                }
            }
        } // column[3]
    }
    Request.FileUploader {
        id:uploader
    }
    Request.MultiPostSubmitter {
        id:submitter
        onOk: {
            root.visible = false
        }
    }
}
